<template>
	<view class="da-dropdown-cell">
		<view class="da-dropdown-cell-item"
			:class="[item.checked ? 'is-actived' : '',item.disabled ? 'is-disabled' : '']"
			v-for="(item, index) in cellOptions" :key="index" @click="handleSelect(item)">
			<text class="da-dropdown-cell-item--label">{{ item.label }}</text>
			<text class="da-dropdown-cell-item--suffix">{{ item.suffix }}</text>
			<fui-icon name="check" color="#0052D9" :size="32" v-if="item.checked && showIcon"></fui-icon>
			<!-- <text class="da-dropdown-cell-item--check"  /> -->
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		watch,
		ref
	} from 'vue'
	import {
		deepClone
	} from '../utils'

	export default defineComponent({
		props: {
			dropdownItem: {
				type: Object,
				default: null,
			},
			dropdownIndex: {
				type: Number,
			},
		},
		emits: ['success'],
		setup(props, {
			emit
		}) {
			const cellOptions = ref([])
			const showIcon = ref(false)

			function initData(options, value) {
				const list = deepClone(options)
				for (let i = 0; i < list.length; i++) {
					const item = list[i]
					if (item.value === value) {
						item.checked = true
						break
					}
				}
				cellOptions.value = list
			}

			function handleSelect(item) {
				if (item.disabled) {
					return
				}

				if (props.dropdownItem?.prop) {
					const res = {
						[props.dropdownItem.prop]: item.value
					}
					emit('success', res, item, props.dropdownIndex)
				} else {
					console.error(`菜单项${props.dropdownItem.title}未定义prop，返回内容失败`)
				}
			}

			watch(() => props.dropdownItem,
				(v) => {
					if (v?.options?.length) {
						initData(v.options, v.value)
					} else {
						cellOptions.value = []
					}
					showIcon.value = v?.showIcon || false
				}, {
					immediate: true,
					deep: true
				})

			return {
				cellOptions,
				showIcon,
				handleSelect,
			}
		},
	})
</script>

<style lang="scss" scoped>
	// 下拉列表
	.da-dropdown-cell {
		--cell-height: 112rpx;

		width: 100%;
		max-height: 60vh;
		overflow-x: hidden;
		overflow-y: auto;

		&-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: var(--cell-height);
			padding: 0 24rpx;
			overflow: hidden;
			font-size: 28rpx;
			color: var(--dropdown-text-color);
			white-space: nowrap;
			border-bottom: 1rpx solid #E7E7E7;

			&:last-child {
				border-bottom: none;
			}

			&--label {
				flex-grow: 1;
				max-width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				// #ifdef H5
				:deep(> span) {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				// #endif
				font-size: 32rpx;
				font-weight: 400;
				// color: rgba(0, 0, 0, 0.9);
			}

			&--suffix {
				flex-grow: 1;
				margin-left: 10px;
				overflow: hidden;
				font-size: 24rpx;
				color: #999;
				text-align: right;
				text-overflow: ellipsis;
				white-space: nowrap;

				// #ifdef H5
				:deep(> span) {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				// #endif
			}

			&--check {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				justify-content: center;
				width: var(--cell-height);
				height: var(--cell-height);

				&::after {
					/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
					font-family: 'da-dropdown-iconfont' !important;
					font-size: calc(var(--cell-height) / 3 * 2);
					font-style: normal;
					content: '\e696';
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}

			&.is-actived {
				color: var(--dropdown-theme-color);
			}

			&.is-disabled {
				color: #aaa;
				background: #efefef;
			}
		}
	}
</style>